# 搭建 TypeScript 正式工作环境

俗话说得好「工欲善其事,必先利其器」,我们在上一节已经搭建好了基础的 TypeScript 环境,并写下了第一行 TypeScript 代码,但是这并不足以支持大家日常的开发,在本节我们将搭建一个在生产环境可用的 TypeScript 环境,以此帮助大家了解 TypeScript 的工具生态.

除此之外,我们还会推荐一些 TypeScript 快速启动的库帮助大家免去搭建环境的烦恼,那么既然都已经有了相关的快速启动库了,为什么我们还要从头搭建环境呢?

原因在于所有的库都是搭建好的,定制性很差,我们如果真的想成为一名合格的 TypeScript 使用者必须要学会搭建环境,不然一方面我们没有任何搭建环境的能力,一旦有一些特殊要求,我们连拓展环境都做不到,另一方面,开发过程中很多错误或者警告其实不是代码本身有问题,而是环境出现了问题,如果我们不懂环境方面的问题,会浪费很多时间.

# 生产环境要素

在正式开始之前我们需要思考一下,一个正式的 TypeScript 开发环境至少需要哪些要素呢?

• 文本编辑器/IDE: 编写代码是任何开发环境的要素之一,本文会以 VS Code 为例来讲解如何配置我们的文本编辑器
• 单元测试: 除非是一般的临时服务,一个长期代码是必须要经过单元测试的,本文会以非常热门的 Jest 作为单测工具
• 代码检查: 从 JSLint 开始,代码检查就进入了前端开发者的视野中,由于 TSLint 被 TypeScript 官方抛弃,我们会以 ESlint 作为代码检查工具

当然还有版本管理工具、持续集成工具、代码美化工具等等,但这些跟 TypeScript 相关性并不大,并非我们的重点.

# 配置文本编辑器

如果你对VS Code感兴趣的话,可以去官网进行下载.

注意: 在下载 VS Code 之前请确保已经安装最新版的 Node

# 安装插件 TS Importer

TS Importer是一个非常实用的 VS Code 插件,它的作用在于可以帮助开发者自动引入模块.

这个插件在编写依赖关系相对复杂的项目时非常有用,节省了我们手动引入模块的时间,而且最大程度规避了犯错的可能.

如果你想定制引入的格式,比如不想使用分号,你可以: 设置->搜索 tsimporter ,进行编辑即可,你可以选择是否用分号,是否用双引号等等.

# 安装插件 Move TS

在我们移动一个文件的时候会有一个问题,我们的文件位置发生变化,相对引入模块的路径也会发生变化,这个是如果引入的路径很多,那么要一个个去改吗?

这就要借助Move TS这个插件.

它可以帮助开发者自动计算移动后的模块引入路径,是提升效率的利器.

# 安装插件 TypeScript Toolbox

顾名思义,这是 TypeScript 的一个工具箱,主要有两个作用: 自动引入模块和生成getter/setter/Constructors.

自动引入模块:

生成getter/setter:

# 为 TypeScript 添加测试

Jest 是一款由 Facebook 开源的大而全的测试框架,它的特点是开箱即用,功能强大,目前三大框架全部采用 Jest 测试,它有如下优点:

• 强大的 TypeScript 支持
• 内置的断言库
• 快照测试
• 内置的覆盖率报告
• 内置的异步支持

我们先下载下列 npm 模块:

npm i jest @types/jest ts-jest -D